<template>
  <div class="xuan" ref="xz">
    <div
      v-for="item in data"
      :key="item.id"
      class="dw"
    >
      <img v-show="item.flag" :src="item.blueImg" alt="" />
      <img v-show="!item.flag" :src="item.yellowImg" alt="" />
      <p>{{ item.text }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
let data = [
  {
    id: 1,
    blueImg: '../src/assets/images/lcar.png',
    yellowImg: '../src/assets/images/hcar.png',
    text: '嘿嘿嘿',
    flag: true
  },
  {
    id: 2,
    blueImg: '../src/assets/images/lz.png',
    yellowImg: '../src/assets/images/hz.png',
    text: '嘿嘿嘿',
    flag: true
  },
  {
    id: 3,
    blueImg: '../src/assets/images/lji.png',
    yellowImg: '../src/assets/images/hji.png',
    text: '嘿嘿嘿',
    flag: true
  },
  {
    id: 4,
    blueImg: '../src/assets/images/ljiao.png',
    yellowImg: '../src/assets/images/hjiao.png',
    text: '嘿嘿嘿',
    flag: true
  },
  {
    id: 5,
    blueImg: '../src/assets/images/lshi.png',
    yellowImg: '../src/assets/images/hshi.png',
    text: '嘿嘿嘿',
    flag: true
  },
  {
    id: 6,
    blueImg: '../src/assets/images/lp.png',
    yellowImg: '../src/assets/images/hp.png',
    text: '嘿嘿嘿',
    flag: true
  }
]

let xz = ref()
onMounted(() => {
  // 遍历xz.value.children
  for (let i = 0; i < xz.value.children.length; i++) {
    // 设置每个子元素的动画延迟时间
    xz.value.children[i].style['animation-delay'] = `${-5 - i * 3.3}s,-${i * 3.3}s,-${i * 3.3}s`
  }
})

// const change = (id) => {
//   let arr = data.find((item) => item.id == id)
//   arr.flag = !arr.flag
//   for (let i = 0; i < xz.value.children.length; i++) {
//     xz.value.children[i].style['animation-play-state'] = arr.flag ? 'running' : 'paused'
//   }
// }
</script>

<style>
.xuan {
  width: 100%;
  height: 100%;
  position: relative;
}
.dw {
  width: 200px;
  height: 200px;
  text-align: center;
  position: absolute;
  left: 0;
  animation-name: moveX, moveY, movecale;
  animation-duration: 10s, 10s, 20s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
  animation-direction: alternate;
}

@keyframes moveX {
  0% {
    left: -100px;
  }
  100% {
    left: 80%;
  }
}

@keyframes moveY {
  0% {
    top: 10%;
  }
  100% {
    top: 60%;
  }
}

@keyframes movecale {
  0% {
    transform: scale(0.6);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.6);
  }
}
</style>
